<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .form{
            position:absolute;
            top:20px;
            left:50%;
            transform:translate(-50%,0%);
            background-color: #909399;
            border-radius: 50px;
            border: lightskyblue solid 2px;
            padding: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-select v-model="checkedCourseIds" multiple placeholder="请选择课程" @change="getStudentByCourseId">
            <el-option
                    v-for="course in courses"
                    :key="course.id"
                    :label="course.name"
                    :value="course.id">
            </el-option>
        </el-select>
    </template>
    <template>
        <el-table
                :data="students"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="学生id"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="courseCode"
                    label="课程编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="courseName"
                    label="课程"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="no"
                    label="学号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="firstname"
                    label="姓"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="lastname"
                    label="名"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="gender"
                    label="性别"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="birthday"
                    label="生日"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮件"
                    width="250">
            </el-table-column>
        </el-table>
    </template>
</div>
</body>



<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                http_prefix:'http://localhost:8080/',
                config : {
                    headers: {'Content-Type': 'application/json;charset=UTF-8'}
                },
                students:[],
                courses:[],
                checkedCourseIds:[],
                teacher:{}
            }
        },
        methods: {
            hintMsg(msg) {
                this.$message(msg);
            },
            successMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'success'
                });
            },
            warnMsg(msg) {
                this.$message({
                    message: msg,
                    type: 'warning'
                });
            },
            errorMsg(msg) {
                this.$message.error(msg);
            },
            getInfo() {
                axios.get(this.http_prefix+"teacher").then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg);
                        return;
                    }
                    this.teacher=resp.data.data
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            async getCourseByTeacher(){
                await axios.get(this.http_prefix+"course/teacher").then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg);
                        return;
                    }
                    this.courses=resp.data.data
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            getStudentByCourseId(){
               let courseIds=[]
                if(this.checkedCourseIds.length>0)
                    courseIds=this.checkedCourseIds
                else{
                    for(let i=0;i<this.courses.length;i++)
                        courseIds.push(this.courses[i].id)
                }
                let str=courseIds.join(",")
                axios.get(this.http_prefix+"student/getStudentTeacherVoByCourseIds/"+str).then(resp=>{
                    if(resp.data.code!=1)
                    {
                        this.errorMsg(resp.data.msg);
                        return;
                    }
                    this.students=resp.data.data
                }).catch(err=>{
                    this.errorMsg(err.message)
                })
            },
            init(){
                this.getCourseByTeacher().then(resp=>{
                    this.getStudentByCourseId()
                })
            }
        },
        mounted() {
            this.init()
        }

    })
</script>
</html>